<template>
    <div class="wrapper">
      <h3>校 园 新 闻</h3>
      <el-table
        ref="newsTable"
        :data="newsList"
        highlight-current-row
        :show-header="false"
        :cell-style="cellStyle"
        @current-change="handleSelect">
        <el-table-column property="theme" width="800"></el-table-column>
        <el-table-column property="createTime"></el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="pageSizes"
          :page-size="size"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
    export default {
        name: "NewsList",
        data(){
            return{
                newsList: [],
                current: 1,
                pageSizes: [10,20,30,40],
                size: 10,
                total: 0
            }
        },
        methods: {
            loadNewsList(current, size){
              this.getRequest('/getNewsList', {current: current, size: size}).then(resp=>{
                  if (resp){
                      this.current=resp.current;
                      this.size=resp.size;
                      this.total=resp.total;
                      this.newsList=resp.list;
                      for(let i=0;i< resp.list.length;i++){
                          this.newsList[i].createTime=resp.list[i].createTime.substring(0,10);
                      }
                  }else{
                      console.log('获取新闻列表失败');
                  }
              })
            },
            handleCurrentChange(val){
                this.loadNewsList(val, this.size);
            },
            handleSizeChange(val){
                this.loadNewsList(this.current, val);
            },
            handleSelect(val){
                this.$router.push({
                    path: '/newsDetails',
                    query: {
                        newsId: val.newsId
                    }
                });
            },
            cellStyle(){
                return 'cursor: pointer';
            }
        },
        mounted() {
            this.loadNewsList(1,10);
        }
    }
</script>

<style scoped>
 .wrapper{
   padding-left: 5%;
 }
 .el-table{
   margin-top: 10px;
 }

  h3{
    padding-left: 2%;
  }

</style>
